<template>
  <div class="home  d-flex flex-column my-container">
    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="" v-if="permersion.search">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-button icon="el-icon-plus" type="primary" v-permission="'ZONE_ADD'" @click="handleAdd(0, '添加区域', '区域基本信息')">添加区域</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="col d-flex over-auto">
        <el-table stripe border :data="tableData" style="width: 100%;overflow: auto;"
                  class="elTable" row-key="id" default-expand-all v-loading="loading"
                  :tree-props="{ children: 'bZoneList', hasChildren: 'hasChildren' }">
          <el-table-column align="center" prop="zoneName" label="区域名称">
          </el-table-column>
          <el-table-column align="center" prop="zoneLevel" label="级别">
          </el-table-column>
          <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>
          <el-table-column label="更新时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remake" label="备注">
          </el-table-column>
          <el-table-column align="center" width="400" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini"
                         v-permission="'ZONE_ADD_SON'" @click="handleAdd(1, '添加子区域', '子区域基本信息', scope.row)">添加子区域
              </el-button>
              <el-button type="primary" size="mini"
                         @click="handleAdd(2, '区域详情', '区域基本信息', scope.row)">查看
              </el-button>
              <el-button type="success" size="mini" v-permission="'ZONE_EDIT'"
                         @click="handleAdd(3, '编辑区域', '区域基本信息', scope.row)">编辑
              </el-button>
              <el-button type="danger" size="mini" v-permission="'ZONE_DEL'" @click="remove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
    @pagination="pagination" /> -->
    </div>
    <template v-if="addDialogVisible">
      <AddDialog :activeRow="activeRow" :dialogVis="addDialogVisible" :dialogType="dialogType"
                 :dialogTitle="dialogTitle" :dialogSubTitle="dialogSubTitle"
                 @update:dialogVis="closeDialog"></AddDialog>
    </template>
  </div>
</template>

<script>
  import AddDialog from "./dialog/addDialog.vue"
  import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
  import { selectZonePage, deleteZonById } from "@/api/regionalSettings/index"

  export default {
    components: {
      CommonTable,
      AddDialog
    },
    data() {
      return {
        loading: false,
        value: "",
        searchModel: {
          userName: ""
        },
        permersion: {
          add: true,
          del: true,
          update: true,
          search: true
        },
        count: 0,
        tableData: [],
        page: {
          pageSize: 10,
          pageIndex: 1
        },
        addDialogVisible: false,
        dialogType: 0,
        dialogTitle: "",
        dialogSubTitle: "",
        activeRow: {}
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.getOneList()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      pagination(pageItem) {
        this.page.pageIndex = pageItem.page
        this.page.pageSize = pageItem.limit
      },

      handleAdd(type, text, subText, row = {}) {
        this.dialogType = type
        this.addDialogVisible = true
        this.dialogTitle = text
        this.dialogSubTitle = subText
        this.activeRow = row
      },
      closeDialog() {
        this.addDialogVisible = false
        this.getOneList()
      },
      remove(row) {
        this.$confirm("确定删除此区域?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.deleteZonById(row)

        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
      },
      async deleteZonById(row) {
        const res = await deleteZonById({ id: row.id })
        if (res.status == "200") {
          this.$message({
            type: "success",
            message: "删除成功!"
          })
          this.getOneList()
        }
      },
      async getOneList() {
        this.loading = true
        const res = await selectZonePage()
        if (res.status == "200") {
          this.tableData = res.object
        }
        this.loading = false
      },
      refresh() {
        this.getOneList()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .status {
    display: inline-block;
    padding: 0 10px;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      margin-left: 20px;
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .content {
    height: 600px;

    .drawer-title {
      font-weight: 400;
      font-size: 24px;
      color: #000000;
      text-align: center;
      padding: 36px 0;
    }

    .form {
      padding: 0 10px;
    }
  }

  .footer {
    height: 360px;
    display: flex;
    align-items: flex-end;
    // justify-content: st-end;
    padding: 5px 20px;
  }</style>
